<template>
		
		<view class="contract-item-content">
			<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
			<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
			<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="true" :show-default-loading-more-text="false"	>
				<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
				<template #top>
					<view class=""  >
						<fui-nav-bar title="报价单" isFixed isOccupy  @leftClick="pageBack"></fui-nav-bar>
						<view class="shop-header">
							<image src="/static/logo.png" mode="" class="shop-logo"></image>
							<view class="shop-name u-text-center">
								{{ownerName}}
							</view>
							<view class=" u-m-t-20 u-m-b-30 u-text-center">
								已签约 {{itemsCount}} 个单品
							</view>
							<view class="u-p-20">
								<fui-search-bar isLeft searchText v-model="searchValue" placeholder="商品名称" :cancel="false"  background="#fff" inputBackground="#f0f0f0" paddingTb="0" paddingLr="0" radius="45"></fui-search-bar>
							</view>
						</view>
						
					</view>
				</template>
				
				<view class="history-container u-p-l-35 u-p-r-35">
					<view class="" v-for="(item, index) in dataList" :key="item.id" >
						<view class="history-item u-p-t-30 u-p-b-30  u-flex ">
							<image :src="item.url" mode="" style="display:block;width: 100rpx;height: 100rpx;margin-right: 20rpx;border-radius: 10rpx;"></image>
							<view class="" style="flex: 1;overflow: hidden;">
								<view class="">
									<view class="u-flex u-row-between">
										<view class="u-font-30" style="font-weight: 500;">{{item.itemName}}</view>
										<view class="u-font-30" style="font-weight: 500;color: #ff551a;">￥{{item.price}}</view>
									</view>
									<view class="u-flex u-row-between">
										<view class="u-font-24 u-m-t-10" v-if="item.specification" style=" display: inline-block; color: #999;background-color: #f8f8f8;padding: 10rpx 12rpx;border-radius: 10rpx;">
											{{item.specification}}
										</view>
										<view class="u-font-12" style="color: #999;">库存{{item.inventoryBalance}}{{item.unit||'瓶'}}</view>
									</view>
									  
								</view>
							</view>
						</view>
					</view>
				</view>
			</z-paging>
		</view>
	
</template>

<script>
	import {useShopStore} from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				itemsCount:0,
				ownerName:'',
				salesAgreementId:'',
				searchValue:'',
				BuyerId:'',
			}
		},
		onLoad(options) {
			this.ownerName = options.ownerName;
			// this.shopId = options.shopId;
			this.BuyerId = options.BuyerId;
		},
		computed: {
			...mapState(useShopStore, {
			  storeShop: 'shop'}),
		},
		components:{
		},
		
		methods: {
			reloadFn(){
				this.$refs.paging.reload();
			},
			async queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
					BuyerId:this.BuyerId,
					Purchasable:true,
					SellerId:this.storeShop.id
				}
					
				if(this.searchValue != ''){
					params.KeyWords = this.searchValue
				}
				uni.showLoading({
					title: 'loading...',
					mask: false
				});
				const res = await this.$newHttp.get('api/v1.2/Seller/GetSellerGoodsPage', { params: params } );
				uni.hideLoading({})
				if(res.code === 200){
					let ary = res.data.list.map(item=>{
						item.checked = this.allSelect;
						return item
					});
					this.$refs.paging.complete(ary);
					this.itemsCount = res.data.totalCount;
				}else{
					this.$refs.paging.complete(false);
				}
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/iconfont/iconfont.css'; 
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.contract-item-content {
		height: 100%;
		.shop-header{
			background: #fff;
			overflow: hidden;
			// margin-bottom: 20rpx;
			.shop-logo{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin: 48rpx auto 30rpx;
				display:block;
			}
			.shop-name{
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}
			
		}
		.bottom-menu-container{
			background-color: #fff;
			.bottom-menu{
				flex:1;border: 1px solid #eaeaee;flex-direction: column;align-items: center;justify-content: center;
			}
		}
	}
	.history-container{
		box-sizing: border-box;
	
		
		background-color: #fff;
		.history-item{
			width: 100%;
			background-color: #fff;
			// border-radius: 10rpx;
			border-bottom: 1px solid #eaeaea;
		}
		
	}
	.history-bottom{
		width: 100%;
		height: 138rpx;
		background-color: #fff;
		.history-del_btn{
			width: 44%;
			height: 80rpx;
			background: #FFBB1A;
			border-radius: 40rpx;
			font-size: 28rpx;
			line-height: 80rpx;
			text-align: center;
			margin: 0;
		}
	}
	
</style>
